<div ng-controller="accountingcontroller">
	<img ng-show="isComponentLoading" desc='banner' style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
	<div ng-show="isComponentLoading" style="margin-top: 10px; overflow: hidden;" id="jqxProgressBar"></div>
	<div class="panel panel-default" ng-hide="isComponentLoading">
		<div class="panel-heading clearfix">
							
			<h3 class="panel-title pull-left" style="padding-top: 7.5px;">{{ Accounting_Title }}</h3>
			<a class="btn btn-large btn-primary" data-toggle="{{ Accounting_BankLink }}" type="button" href="{{ Accounting_BankURL }}" style="margin-left:20px" target="_blank"><span class="glyphicon glyphicon-share-alt"></span></a>
			<div class="pull-right">
				<div class="pull-left" style="margin-right:10px">
					<img ng-show="loadingAccounts" desc='banner' style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
					<select ng-show="canSelectAccount" class="form-control" data-ng-options="account.Name for account in accounts" data-ng-model="selectedaccount" ng-change="selectedaccountchanged()"></select>
				</div>
				<div class="pull-right" >
					<button type="button" class="btn btn-primary" data-toggle="modal" href="#addAccount">
						<span class="glyphicon glyphicon-plus-sign"></span> {{ Accounting_AddAccount }}
					</button>
				</div>
				<div class="pull-right" style="margin-right:10px">
					<button ng-show="canDeleteAccount" type="button" class="btn btn-danger" data-toggle="modal" ng-click="deleteAccountCommand()" >
						<span class="glyphicon glyphicon-trash"></span>
					</button>
				</div>
				<div class="pull-right" style="margin-right:10px">
					<button ng-show="canDeleteAccount" type="button" class="btn btn-primary" data-toggle="modal" ng-click="editAccountCommand()" >
						<span class="glyphicon glyphicon-edit"></span>
					</button>
				</div>
			</div>

			<ul class="list-group">
				<button ng-show="canListOperations" data-toggle="modal" href="#operationslist" class="btn btn-primary"><span class="glyphicon glyphicon-list"></span> {{ Accounting_OperationList }}</button>
				<button ng-show="canAddOperation" data-toggle="modal" href="#addOperation" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> {{ Accounting_AddOperation }} </button>
				<button ng-show="canAddCategory" data-toggle="modal" href="#manageCategories" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> {{ Accounting_ManageCategories }}</button>
			</ul>

			<div class="clearfix">
				<div class="pull-left">
					<div ng-show="canListOperations" id="pieTotalRealAmount" style="width:400px; height:200px;"></div>
				</div>
				<div class="pull-right">
					<div ng-show="canListOperations" id="pieTotalExpectedAmount" style="width:400px; height:200px;"></div>
				</div>
			</div>

			<!-- Account summary -->
			<ul class="list-group">
				<li class="list-group-item">
					{{ Accounting_CreditTotal }} <span class="badge">{{ credits.length }}</span>
				</li>
				<li class="list-group-item">
					{{ Accounting_DebitTotal }} <span class="badge">{{ debits.length }}</span>
				</li>
				<li class="list-group-item">
					{{ Accounting_ExpectedTotal }}<span class="badge">{{ expectedTotal }}</span>
				</li>
				<li class="list-group-item">
					{{ Accounting_RealTotal }}<span class="badge">{{ realTotal }}</span>
				</li>
			</ul>
			
			<div class="modal modal-wide fade" id="operationslist">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header clearfix">
							<div class="col-md-2 pull-left">
								<h4 class="modal-title">{{ Accounting_OperationList }} <span class="badge">{{operations.length}}</span></h4>
							</div>
							<div class="col-md-1 pull-left">
								<div class="btn-group">
									<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-eye-open"></span></button>
									<ul class="dropdown-menu" role="menu">
										<li><input type="radio" style="margin:10px" ng-model="selectedView" value="0" > {{ Accounting_ChronologicView }} </li>
										<li><input type="radio" style="margin:10px" ng-model="selectedView" value="1" > {{ Accounting_CategoryView }} </li>
									</ul>
								</div>
							</div>
							<div class="col-md-1 pull-left">
								<div class="btn-group">
									<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-calendar"></span></button>
									<ul class="dropdown-menu" role="menu">
										<div id="rangeSelector"></div>
									</ul>
								</div>
							</div>
							<div class="col-md-1 pull-right">
								<button type="button" class="close" data-dismiss="modal">x</button>
							</div>
							<div class="col-md-2 pull-right">
								<input type="text" ng-model="filterOperation" class="form-control search header-elements-margin" placeholder="{{ Main_Filter }}">
							</div>
						</div>
						<div class="modal-body">
							<table class="table table-striped table-condensed" ng-show="selectedView==0">
								<thead>
									<tr>
										<th></th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationIsRecurring }}"></th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationIdDescription }}">{{ Accounting_OperationIdHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationLabelDescription }}">{{ Accounting_OperationLabelHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationTypeDescription }}">{{ Accounting_OperationTypeHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationStateDescription }}">{{ Accounting_OperationStateHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationPaymentMeanDescription }}">{{ Accounting_OperationPaymentMeanHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationCategoryDescription }}">{{ Accounting_OperationCategoryHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationExpectedAmountDescription }}">{{ Accounting_OperationExpectedAmountHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationRealAmountDescription }}">{{ Accounting_OperationRealAmountHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationDateDescription }}">{{ Accounting_OperationDateHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationModificationDateDescription }}">{{ Accounting_OperationModificationDateHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationCreationDateDescription }}">{{ Accounting_OperationCreationDateHeader }}</th>
										<th data-toggle="tooltip" title="{{ Accounting_OperationActionDescription }}"></th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="operation in operations | filter : filterOperation">
										<td><a ng-show="operation.Bill != ''" ng-href="{{ operation.Bill }}" target="_blank"><span class="glyphicon glyphicon-paperclip"></span></a></td>
										<td><span ng-show="operation.IsRecurring" class="glyphicon glyphicon-time"></span></td>
										<td>{{operation.Id}}</td>
										<td>{{operation.Label}}</td>
										<td>
											<div ng-switch="operation.Type">
												<span ng-switch-when="0" class="glyphicon glyphicon-plus"></span>
												<span ng-switch-when="1" class="glyphicon glyphicon-minus"></span>
											</div>
										</td>
										<td>{{operation.Status}}</td>
										<td>{{operation.PaymentMean}}</td>
										<td>{{operation.Category}}</td>
										<td>{{operation.Expectedamount}}</td>
										<td>{{operation.Realamount}}</td>
										<td>{{operation.Operationdate}}</td>
										<td>{{operation.ModificationDate}}</td>
										<td>{{operation.CreationDate}}</td>
										<td>
											<div class="btn-group"> 
												<button class="btn btn-success btn-xs">{{ Accounting_OperationActions }}</button>
												<button class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu">
													<li><a data-toggle="modal" ng-click="selectToModifyOperationCommand(operation)" href="#modifyOperation"><span class="glyphicon glyphicon-edit"></span> {{ Main_Modify }}</a></li>
													<li><a ng-click="deleteOperationCommand(operation.Id)" href="#"><span class="glyphicon glyphicon-trash"></span> {{ Main_Delete }}</a></li>
												</ul>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
							<div class="panel panel-default" ng-show="selectedView==1">
								<div ng-repeat="category in categoryView">
									<div class="panel-heading">{{category.CategoryName}}</div>
									<div class="panel-body">
										<table class="table">
											<thead>
												<tr>
													<th data-toggle="tooltip" title="{{ Accounting_OperationIsRecurring }}"></th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationIdDescription }}">{{ Accounting_OperationIdHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationLabelDescription }}">{{ Accounting_OperationLabelHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationTypeDescription }}">{{ Accounting_OperationTypeHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationStateDescription }}">{{ Accounting_OperationStateHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationPaymentMeanDescription }}">{{ Accounting_OperationPaymentMeanHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationExpectedAmountDescription }}">{{ Accounting_OperationExpectedAmountHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationRealAmountDescription }}">{{ Accounting_OperationRealAmountHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationDateDescription }}">{{ Accounting_OperationDateHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationModificationDateDescription }}">{{ Accounting_OperationModificationDateHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationCreationDateDescription }}">{{ Accounting_OperationCreationDateHeader }}</th>
													<th data-toggle="tooltip" title="{{ Accounting_OperationActionDescription }}"></th>
												</tr>
											</thead>
											<tbody>
												<tr ng-repeat="operation in category.Operations | filter : filterOperation">
													<td><a ng-show="operation.Bill != ''" ng-href="{{ operation.Bill }}" target="_blank"><span class="glyphicon glyphicon-paperclip"></span></a></td>
													<td><span ng-show="operation.IsRecurring" class="glyphicon glyphicon-time"></span></td>
													<td>{{operation.Id}}</td>
													<td>{{operation.Label}}</td>
													<td>
														<div ng-switch="operation.Type">
															<span ng-switch-when="0" class="glyphicon glyphicon-plus"></span>
															<span ng-switch-when="1" class="glyphicon glyphicon-minus"></span>
														</div>
													</td>
													<td>{{operation.Status}}</td>
													<td>{{operation.PaymentMean}}</td>
													<td>{{operation.Expectedamount}}</td>
													<td>{{operation.Realamount}}</td>
													<td>{{operation.Operationdate}}</td>
													<td>{{operation.ModificationDate}}</td>
													<td>{{operation.CreationDate}}</td>
													<td>
														<div class="btn-group"> 
															<button class="btn btn-success btn-xs">{{ Accounting_OperationActions }}</button>
															<button class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
															<ul class="dropdown-menu">
																<li><a data-toggle="modal" ng-click="selectToModifyOperationCommand(operation)" href="#modifyOperation"><span class="glyphicon glyphicon-edit"></span> {{ Main_Modify }}</a></li>
																<li><a ng-click="deleteOperationCommand(operation.Id)" href="#"><span class="glyphicon glyphicon-trash"></span> {{ Main_Delete }}</a></li>
															</ul>
														</div>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<pre>{{ operationsStatus }}</pre>
						</div>
					</div>
				</div>
			</div>

			<div class="modal" id="addAccount">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">x</button>
							<h4 class="modal-title">{{ Accounting_AddAccount }}</h4>
						</div>
						<div class="modal-body">
							<div class="container">
								<div class="row">
									<div class="col-sm-8">
									<form>
										<div class="row form-group">
											<div class="col-xs-4"><input ng-model="newAccountName" class="form-control" rows="5" placeholder="{{ Accounting_AccountName }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-3">
												{{ Accounting_AccountState }}  <select ng-model="newAccountState" class="form-control">
															<option ng-repeat="state in accountStates">{{state}}</option>
														</select>
											</div>
										</div>
										<img ng-show="canAddAccount == false" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
										<button ng-show="canAddAccount" type="button" class="btn btn-primary" ng-click="addAccountCommand()">
											<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
										</button>
									</form>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
						</div>
					</div>
				</div>
			</div>

			<div class="modal" id="manageCategories">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">x</button>
							<h4 class="modal-title">{{ Accounting_AddCategory }}</h4>
						</div>
						<div class="modal-body">
							<div>
								<div id="alert" style="margin-left:10px;margin-right:10px;display:none"> 
									<a class="close" style="margin-left:10px;" ng-click="cancelSelectedCategoryCommand()">×</a>  
									<a ng-click="deleteCategoryCommand(selectedItem.id)" class="pull-right" style="cursor:pointer;"><i class="glyphicon glyphicon-trash"></i></a>
									{{ selectedItem.label }}  
								</div>
								<img ng-show="loadingCategories" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
								<div id="jqxTree" ng-show="!loadingCategories"></div>
							</div>	
							<br />
							<div class="input-group">
								<input type="text" class="form-control" ng-model="newCategoryName" placeholder="{{ Accounting_NewCategory }}"/>
								<div class="input-group-btn">
									<button class="btn btn-default" type="submit" ng-click="addCategoryCommand(selectedItem.id)"><i class="glyphicon glyphicon-plus"></i>{{ Main_Add }}</button>
								</div>
							</div>
						</div>
						<div class="modal-footer">
						</div>
					</div>
				</div>
			</div>

			<div class="modal" id="addOperation">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">x</button>
							<h4 class="modal-title">{{ Accounting_AddOperation }}</h4>
						</div>
						<div class="modal-body">
							<div class="container">
								<div class="row">
									<div class="col-sm-8">
									<form>
										<div class="row form-group">
											<div class="col-xs-6">
												<textarea ng-model="newOperationLabel" class="form-control" rows="5" placeholder="{{ Accounting_OperationLabel }}"></textarea>
											</div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">
												<div class="checkbox">
													<label>
														<input type="checkbox" ng-model="newOperationType" > {{ Accounting_OperationIsDebit }}
													</label>
												</div>
												{{ Accounting_OperationState }}  
												<select ng-model="newOperationState" class="form-control" >
													<option ng-repeat="sta in operationStates">{{sta}}</option>
												</select>
												{{ Accounting_Category }}  
												<select ng-model="newOperationCategory" class="form-control">
													<option ng-repeat="cat in categories">{{ cat.Name }}</option>
												</select>
												{{ Accounting_PaymentMean }}
												<select ng-model="newOperationPaymentMean" class="form-control">
													<option ng-repeat="paymentMean in operationPaymentMeans">{{ paymentMean }}</option>
												</select>
												
												<div class="input-group" style="margin-top:10px;margin-bottom:10px;">
													<span class="input-group-addon">€</span>
													<input type="text" class="form-control" placeholder="{{ Accounting_ExpectedAmount }}" ng-model="newOperationExpectedamount"/>
												</div>	
				
												<input class="form-control" ng-model="newOperationDate" type="text" placeholder="{{ Accounting_OperationDate }}" id="newDateOperationControl" />
												
												<div class="checkbox">
													<label>
														<input type="checkbox" ng-model="newOperationIsRecurring" >{{ Accounting_OperationIsRecurring }}
													</label>
												</div>
												
												<form>
													<input type="file" id="file" name="file" onchange="angular.element(this).scope().setBill(this.files)" multiple="false"/>
												</form>
												
											</div>
										</div>
										<button type="button" class="btn btn-primary" ng-click="addOperationCommand()">
											<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
										</button>
									</form>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
						</div>
					</div>
				</div>
			</div>

			<div class="modal" id="modifyOperation">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">x</button>
							<h4 class="modal-title">{{ Accounting_ModifyOperation }}</h4>
						</div>
						<div class="modal-body">
							<div class="container">
								<div class="row">
									<div class="col-sm-8">
									<form>
										<div class="row form-group">
											<div class="col-xs-6">
												<textarea ng-model="newOperationLabel" class="form-control" rows="5"></textarea>
											</div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">
												<div class="checkbox">
													<label>
														<input type="checkbox" ng-model="newOperationType" ng-checked="selectedOperation.Type==1">{{ Accounting_OperationIsDebit }}
													</label>
												</div>
												{{ Accounting_OperationState }}  
												<select class="form-control" data-ng-options="sta for sta in operationStates" data-ng-model="newOperationState"></select>
												{{ Accounting_Category }}  
												<select class="form-control" data-ng-options="cat.Name for cat in categories" data-ng-model="newOperationCategory" >
												</select>
												{{ Accounting_PaymentMean }}
												<select class="form-control" data-ng-options="p for p in operationPaymentMeans" data-ng-model="newOperationPaymentMean"></select>
												<div class="input-group" style="margin-top:10px;margin-bottom:10px;">
													<span class="input-group-addon">€</span>
													<input type="text" class="form-control" placeholder="{{ Accounting_ExpectedAmount }}" ng-model="newOperationExpectedamount"/>
												</div>	
												
												<div class="input-group" style="margin-top:10px;margin-bottom:10px;">
													<span class="input-group-addon">€</span>
													<input type="text" class="form-control" placeholder="{{ Accounting_RealAmount }}" ng-model="newOperationRealamount"/>
												</div>	

												<input class="form-control" ng-model="newOperationDate" type="text" placeholder="{{ Accounting_OperationDate }}" id="modifyDateOperationControl" />
												
												<div class="checkbox">
													<label>
														<input type="checkbox" ng-model="newOperationIsRecurring" ng-checked="selectedOperation.IsRecurring==1">{{ Accounting_OperationIsRecurring }}
													</label>
												</div>
												
												<form>
													<input type="file" id="file" name="file" onchange="angular.element(this).scope().setBill(this.files)" multiple="false"/>
												</form>
												
											</div>
										</div>
										<button type="button" class="btn btn-primary" ng-click="updateOperationCommand()">
											<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
										</button>
									</form>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
						</div>
					</div>
				</div>
			</div>

			<div class="modal" id="editAccount">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">x</button>
							<h4 class="modal-title">{{ Accounting_EditAccount }}</h4>
						</div>
						<div class="modal-body">
							<div class="container">
								<div class="row">
									<div class="col-sm-8">
									<form>
										<div class="row form-group">
											<div class="col-xs-4"><input ng-model="editAccountName" class="form-control" rows="5" placeholder="{{ Accounting_AccountName }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-3">
												{{ Accounting_AccountState }}  
												<select class="form-control" data-ng-options="sta for sta in accountStates" data-ng-model="editAccountState"></select>
											</div>
										</div>
										<button type="button" class="btn btn-primary" ng-click="updateAccountCommand()">
											<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
										</button>
									</form>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>